<template>
  <div style="height:100%">
    <div class="waic">
      <div class="title title-zw">项目管理</div>
    </div>
    <div class="sub-waic" style="height: calc(100% - 95px);">
      <!-- <div class="waic">
        <div class="title" @click="changeItem(1)"> -->
          <!-- <img src="../../assets/iconImg_.png" class="iconImg" v-if="item==1"> -->
          <!-- <i class="el-icon-tickets iconImg" v-if="item==1"></i> -->
          <!-- <img src="../../assets/iconImg.png" class="iconImg" v-else> -->
          <!-- <i class="el-icon-tickets iconImg" v-else></i>
          项目管理
        </div>
        <div class="zhankai" v-show="item==1">
          <div class="jqquery">
            <div class="nectitle">模糊查询:</div>
            <el-input v-model="params.name" placeholder="请输入项目名称" size="mini"></el-input>
            <div class="search" @click="search">搜索</div>
          </div>
          <div class="mhquery">
            <div class="nectitle">条件查询:</div>
            <el-select
              placeholder="项目类别"
              class="handle-select mr10"
              v-model="params.projType"
              size="mini"
              @change="tjChange"
            >
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="(item) in projectTypeAll"
                :key="item.value"
              ></el-option>
            </el-select>
            <el-select
              placeholder="投资类型"
              class="handle-select mr10"
              v-model="params.currentStage"
              size="mini"
              @change="tjChange"
            >
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="(item) in projectProgressAll"
                :key="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
      </div> -->
      <div class="waic">
        <div class="title" @click="changeItem(2)">
          <!-- <img src="../../assets/iconImg_.png" class="iconImg" v-if="item==2"> -->
          <i class="el-icon-zoom-out iconImg" v-if="item==2"></i>
          <!-- <img src="../../assets/iconImg.png" class="iconImg" v-else> -->
          <i class="el-icon-zoom-out iconImg" v-else></i>
          项目查询
        </div>
        <div class="zhankai" v-show="item==2">
          <div class="jqquery" style="height:120px;">
            <div class="nectitle">模糊查询:</div>
            <el-input v-model="params.project_name" placeholder="请输入项目名称" size="mini"></el-input>
            <!-- <el-input v-model="params.procedures" placeholder="前期手续办理情况" size="mini"></el-input> -->
            <div class="search" @click="search">搜索</div>
          </div>
          <div class="mhquery" style="height:280px;overflow:auto;">
            <div class="nectitle">条件查询:</div>
            <el-select
              placeholder="项目类别"
              class="handle-select mr10"
              v-model="params.xjxqlb"
              size="mini"
              @change="tjChange"
              clearable
            >
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="(item) in projectTypeAll"
                :key="item.value"
              ></el-option>
            </el-select>
            <el-select
              placeholder="投资类型"
              class="handle-select mr10"
              v-model="params.tzlx"
              size="mini"
              @change="tjChange"
              clearable
            >
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="(item) in projectProgressAll"
                :key="item.value"
              ></el-option>
            </el-select>
            <!-- <el-select placeholder="项目实施单位" class="handle-select mr10" v-model="params.projImplementOrg" size="mini" @change="tjChange">
                        <el-option :label="item" :value="item=='全部'?'':item" v-for="(item) in projImplementOrgs" :key="item"></el-option>
            </el-select>-->
            <!-- <el-date-picker
              type="month"
              v-model="params.consStartYear"
              placeholder="项目开始时间"
              value-format="yyyy/MM"
              size="mini"
              @change="tjChange"
            ></el-date-picker> -->
            <!-- <el-date-picker  type="month" v-model="params.consEndYear" placeholder="项目结束时间" value-format="yyyy/MM" size="mini" @change="tjChange"></el-date-picker> -->
            <el-select
              placeholder="建设性质"
              class="handle-select mr10"
              v-model="params.build_property_id"
              size="mini"
              @change="tjChange"
              clearable
            >
              <el-option
                :label="item.name"
                :value="item.name=='全部'?'':item.value"
                v-for="(item) in constructionEvolves"
                :key="item.value"
              ></el-option>
            </el-select>
            <!-- <el-date-picker  type="date" v-model="params.planStartWorkTime" placeholder="预计开复工时间" value-format="yyyy/MM/dd" size="mini" @change="tjChange"></el-date-picker> -->
            <!-- <el-date-picker  type="date" v-model="params.realStartWorkTime" placeholder="实际开复工时间" value-format="yyyy/MM/dd" size="mini" @change="tjChange"></el-date-picker> -->
            <!-- <el-select placeholder="是否入统" class="handle-select mr10" v-model="params.isStatistics" size="mini" style="margin-bottom:15px;" @change="tjChange">                       
                        <el-option :label="item.name" :value="item.value" v-for="(item) in isStatisticss" :key="item.name"></el-option>
            </el-select>-->
          </div>
        </div>
      </div>
      <div class="waic">
        <div class="title" @click="changeItem(3)">
          <!-- <img src="../../assets/iconImg_.png" class="iconImg" v-if="item==3">
          <img src="../../assets/iconImg.png" class="iconImg" v-else>-->
          <i class="el-icon-news iconImg" v-if="item==3"></i>
          <i class="el-icon-news iconImg" v-else></i>
          项目进度管理
        </div>
        <div class="zhankai" v-show="item==3">
          <div class="jqquery" v-show="index==3.1" style="height:77px;">
            <div class="nectitle">模糊查询:</div>
            <el-input v-model="params.project_name" placeholder="请输入项目名称" size="mini"></el-input>
            <div class="search" @click="search">搜索</div>
          </div>
          <div class="mhquery" v-show="index==3.1" style="height:125px;">
            <div class="nectitle">条件查询:</div>
            <el-select
              placeholder="项目类别"
              class="handle-select mr10"
              v-model="params.xjxqlb"
              size="mini"
              @change="tjChange"
              clearable
            >
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="(item) in projectTypeAll"
                :key="item.value"
              ></el-option>
            </el-select>
            <el-select
              placeholder="投资类型"
              class="handle-select mr10"
              v-model="params.tzlx"
              size="mini"
              @change="tjChange"
              clearable
            >
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="(item) in projectProgressAll"
                :key="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="jqquery" v-show="index!=3.1" style="height:120px;">
            <div class="nectitle">进度查询:</div>
            <el-date-picker
              type="month"
              v-model="mProgress"
              placeholder="选择日期"
              v-show="index=='3.1.2'"
              value-format="yyyy/MM"
              @change="searchProgress"
            ></el-date-picker>
            <el-date-picker
              v-model="yProgress"
              placeholder="选择日期"
              type="year"
              v-show="index=='3.1.1'"
              value-format="yyyy"
              @change="searchProgress"
            ></el-date-picker>
            <div
              style="margin-left:30px;margin-top:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis"
            >
              <span>当前项目:</span>
              <span>{{projectName}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="waic">
        <div class="title" @click="changeItem(5)">
          <!-- <img src="../../assets/iconImg_.png" class="iconImg" v-if="item==5">
          <img src="../../assets/iconImg.png" class="iconImg" v-else>-->
          <i class="el-icon-view iconImg" v-if="item==5"></i>
          <i class="el-icon-view iconImg" v-else></i>
          项目进度查询
        </div>
        <div class="zhankai" v-show="item==5">
          <div class="jqquery" style="height:130px;">
            <div class="nectitle">进度查询:</div>
            <el-date-picker
              type="month"
              v-model="nTime"
              placeholder="选择日期"
              value-format="yyyy/MM"
              @change="timeChange"
            ></el-date-picker>
            <el-input v-model="prjName" placeholder="请输入项目名称" size="mini"></el-input>
            <div class="search" @click="timeChange">搜索</div>
          </div>
        </div>
      </div>
    <!--  <div class="waic">
        <div class="title" @click="changeItem(6)">
          &lt;!&ndash; <img src="../../assets/iconImg_.png" class="iconImg" v-if="item==6">
          <img src="../../assets/iconImg.png" class="iconImg" v-else>&ndash;&gt;
          <i class="el-icon-menu iconImg" v-if="item==6"></i>
          <i class="el-icon-menu iconImg" v-else></i>
          项目概况
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import bus from "../../assets/bus.js";
import {
  projectType,
  projectProgress,
  loginUrl,
  projImplementOrgs,
  constructionEvolves,
  isStatisticss
} from "../tool/Global/app-config.js";
import { logoutToLogin } from "./../tool/Global/app-mgr.js";
//修改为监测经协系统是否已经登陆
import iconImg_ from "../../assets/iconImg_.png";
export default {
  data: function() {
    return {
      prjName: "",
      item: "", //默认展示第二个
      index: 3.1,
      projectTypeAll: null,
      projectProgressAll: null,
      projImplementOrgs: null,
      constructionEvolves: null,
      isStatisticss: null,
      mProgress: "",
      yProgress: "",
      projectName: "",
      nowProgress: null,
      projectProgress: projectProgress,
      nTime: new Date(),
      params: {
        projImplementOrg: null,
        consStartYear: null,
        consEndYear: null,
        constructionEvolve: null,
        planStartWorkTime: null,
        realStartWorkTime: null,
        isStatistics: null,
        procedures: null,
        name: null,
        projType: null,
        currentStage: null,
        tzlx:null,
        xjxqlb:null
      }
    };
  },
  mounted: function() {
    this.busEvent();
    this.projImplementOrgs = ["全部"].concat(projImplementOrgs);
    this.constructionEvolves = constructionEvolves;
    this.isStatisticss = [{ name: "全部", value: "2" }].concat(isStatisticss);
    this.projectTypeAll = projectType;
    this.projectProgressAll = projectProgress;
  },
  methods: {
    tjChange() {
      const args = this.params;
      let params = JSON.parse(JSON.stringify(args));
      if(params.tzlx!=null){
        params.tzlx = encodeURIComponent(params.tzlx);
      }
      bus.$emit("search", params);
    },
    changeItem(val) {
      this.index = 3.1;
      this.item = val;
      this.mProgress = "";
      this.yProgress = "";
      this.prjName = "";
      this.nTime = new Date();
      for (var key in this.params) {
        this.params[key] = null;
      }
      bus.$emit("changeLeftItem", val);
    },
    search() {
      bus.$emit("search", this.params);
    },
    busEvent() {
      let self = this;
      bus.$on("intoyProgress", function(name, progress) {
        self.yProgress = "";
        self.index = "3.1.1";
        if (name) {
          self.projectName = name;
        }
        if (progress == "规划") {
          self.nowProgress = 1;
        } else if (progress == "立项") {
          self.nowProgress = 2;
        } else if (progress == "施工") {
          self.nowProgress = 3;
        } else if (progress == "竣工") {
          self.nowProgress = 4;
        } else {
          self.nowProgress = null;
        }
      });
      bus.$on("leaveProgress", function() {
        self.index = "3.1";
        self.mProgress = "";
        self.yProgress = "";
        for (var key in self.params) {
          self.params[key] = null;
        }
      });
      bus.$on("intomProgress", function() {
        self.mProgress = "";
        self.index = "3.1.2";
      });
    },
    searchProgress() {
      if (this.index == "3.1.1") {
        bus.$emit("yearPSear", this.yProgress);
      } else if (this.index == "3.1.2") {
        bus.$emit("monthPSear", this.mProgress);
      }
    },
    timeChange() {
      bus.$emit("timeChange", this.nTime, this.prjName);
    }
  }
};
</script>
<style scoped>
.sub-waic .waic:not(:last-child) {
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.waic .title.title-zw {
  height: 50px;
  line-height: 50px;
  background: #4580d0;
  color: #fff;
  margin-bottom: 10px;
  font-size: 24px;
  font-family: "微软雅黑";
  padding-left: 25px;
  border-radius: 5px;
  margin: 15px auto 10px auto;
  font-weight: normal;
}
.sub-waic {
  border: 1px solid #ccc;
  background: #f5f5f5;
  width: 90%;
  margin: 0 auto;
  margin-top: 15px;
  border-radius: 5px;
  height: calc(100% - 80px);
  overflow: auto;
}
.waic {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
  /* border: 1px solid #d4eefe; */
}
.waic .title {
  /* height: 40px; */
  /* border: 1px solid #d4eefe; */
  border-radius: 10px;
  /* line-height: 40px; */
  /* font-size: 20px; */
  /* font-weight: 700; */
  color: #117ac1;
  cursor: pointer;
}
.iconImg {
  vertical-align: middle;
  /* margin-left: 40px;
  margin-right: 15px; */
  margin-left: 15px;
  width: 15px;
  color: #117ac1;
}
.jqquery {
  width: 100%;
  margin: 10px auto;
  border: 1px solid #ddd;
  padding-top: 10px;
  padding-bottom: 10px;
}
.jqquery .nectitle,
.mhquery .nectitle {
  margin-left: 15px;
  font-size: 14px;
}
.el-input,
.el-select {
  width: 200px;
  margin-top: 15px;
  margin-left: 15px;
}
.search {
  height: 26px;
  width: 50px;
  display: inline-block;
  text-align: center;
  background-color: #0a88df;
  color: #fff;
  line-height: 26px;
  font-size: 13px;
  cursor: pointer;
}
.mhquery {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ddd;
  padding-top: 10px;
  padding-bottom: 10px;
  /* margin-top: 15px; */
  margin-bottom: 10px;
}
.progressItem {
  float: left;
  margin-left: 28px;
  color: #9e9e9e;
}
li.active {
  color: red;
}
.el-step__title {
  font-size: 12px;
}
*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #eee;
}
*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /*-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);*/
  border-radius: 2px;
  background: #f5f5f5;
}
</style>

